@use "./reset";

.app-container {
  padding: 15px;
}

.search-container {
  padding: 18px 0 0 10px;
  margin-bottom: 10px;
  background-color: var(--el-bg-color-overlay);
  border: 1px solid var(--el-border-color-light);
  border-radius: 4px;
  box-shadow: var(--el-box-shadow-light);
}

.table-container > .el-card__header {
  padding: calc(var(--el-card-padding) - 8px) var(--el-card-padding);
}

.link-type,
.link-type:focus {
  color: #337ab7;
  cursor: pointer;

  &:hover {
    color: rgb(32 160 255);
  }
}

// 侧边栏菜单样式覆盖
.el-menu {
  border-right: none !important;
  background-color: var(--menu-background) !important;
  color: var(--menu-text) !important;
  
  .el-menu-item {
    color: var(--menu-text) !important;
    
    &:hover {
      background-color: var(--menu-hover) !important;
    }
    
    &.is-active {
      background-color: var(--menu-active) !important;
      color: var(--menu-text) !important;
    }
  }
  
  .el-sub-menu__title {
    color: var(--menu-text) !important;
    
    &:hover {
      background-color: var(--menu-hover) !important;
    }
  }
  
  // 子菜单样式
  .el-sub-menu {
    .el-menu {
      background-color: var(--menu-background) !important;
    }
    
    .el-menu-item {
      color: var(--menu-text) !important;
      
      &:hover {
        background-color: var(--menu-hover) !important;
      }
      
      &.is-active {
        background-color: var(--menu-active) !important;
        color: var(--menu-text) !important;
      }
    }
  }
}

// 全局菜单样式覆盖（确保所有菜单项都使用正确的颜色）
.el-menu--vertical,
.el-menu--horizontal {
  background-color: var(--menu-background) !important;
  color: var(--menu-text) !important;
  
  .el-menu-item,
  .el-sub-menu__title {
    color: var(--menu-text) !important;
  }
  
  .el-sub-menu {
    .el-menu {
      background-color: var(--menu-background) !important;
      
      .el-menu-item {
        color: var(--menu-text) !important;
      }
    }
  }
}

// 确保菜单图标和文字都使用正确的颜色
.el-menu {
  .svg-icon,
  .sub-el-icon {
    color: var(--menu-text) !important;
  }
  
  .el-menu-item,
  .el-sub-menu__title {
    .svg-icon,
    .sub-el-icon {
      color: var(--menu-text) !important;
    }
    
    span {
      color: var(--menu-text) !important;
    }
  }
  
  .el-menu-item.is-active {
    .svg-icon,
    .sub-el-icon {
      color: var(--menu-text) !important;
    }
    
    span {
      color: var(--menu-text) !important;
    }
  }
  
  // 确保子菜单的激活状态也正确
  .el-sub-menu .el-menu-item.is-active {
    .svg-icon,
    .sub-el-icon {
      color: var(--menu-text) !important;
    }
    
    span {
      color: var(--menu-text) !important;
    }
  }
}

// 处理Element Plus弹出菜单的样式
.el-popper {
  .el-menu {
    background-color: var(--menu-background) !important;
    
    .el-menu-item {
      color: var(--menu-text) !important;
      
      &:hover {
        background-color: var(--menu-hover) !important;
      }
      
      &.is-active {
        background-color: var(--menu-active) !important;
        color: var(--menu-text) !important;
      }
    }
  }
}

// Dashboard 全屏模式样式
body.dashboard-fullscreen {
  // 隐藏侧边栏
  .sidebar-container {
    display: none !important;
  }
  
  // 隐藏固定头部区域（包含导航栏和标签栏）
  .fixed-header {
    display: none !important;
  }
  
  // 隐藏顶部导航栏
  .navbar {
    display: none !important;
  }
  
  // 隐藏标签视图
  .tags-view-container {
    display: none !important;
  }
  
  // 隐藏混合布局的左侧菜单
  .mix-container__left {
    display: none !important;
  }
  
  // 隐藏设置按钮
  .settings-container {
    display: none !important;
  }
  
  // 主容器占满全屏
  .main-container {
    margin-left: 0 !important;
    width: 100% !important;
    transition: none !important;
  }
  
  // 应用主区域
  .app-main {
    min-height: 100vh !important;
    padding: 0 !important;
  }
  
  // 应用容器全屏
  .app-container {
    padding: 20px !important;
    height: 100vh !important;
    overflow-y: auto !important;
  }
  
  // 确保全屏时布局正确
  .wh-full {
    width: 100% !important;
  }
  
  // Dashboard 内容占满全屏
  .dashboard {
    min-height: 100vh !important;
  }
}